<template>
	<view class="page">
		<view class="top-box">
			<image src="@/static/logo.png" mode="widthFix" class="logo"></image>
		</view>
		<view v-if="type === 1" class="btn-box">
			<button @getphonenumber="getPhoneNumber" @click="login" class="btn-primary">
				<image class="icon-wechat" src="@/static/IconWeChat.png"></image>
				微信授权登录
			</button>
			<view class="btn-cancel" @click="type = 2">
				<image class="icon-phone" src="@/static/phone-fill.png"></image>
				手机号码登录
			</view>
			<view class="text-28 flex-ct">
				登录即表示同意
				<navigator class="text-link" hover-class="none" url="/pages/user/Privacy">《合同在线签服务协议和隐私政策》</navigator>
			</view>
		</view>
		<view v-if="type === 2" class="form-box">
			<view class="form-item flex-fs">
				<image src="@/static/phoneGet.png" class="icon-phoneGet"></image>
				<input type="number" v-model="form.phone" placeholder="11位手机号" placeholder-class="place"
					class="flex-1" />
			</view>

			<view class="flex-sb" style="margin: 12rpx 0 30rpx">
				<view class="form-item flex-fs flex-1" style="margin: 0">
					<image src="@/static/authCode.png" class="icon-auth"></image>
					<input type="text" v-model="form.verificationCode" placeholder="短信验证码" placeholder-class="place"
						class="flex-1" />
					<view :disabled="disabled" :class="{ disabled }" @click="getCode" class="btn-vice">
						{{ btnText }}
					</view>
				</view>
			</view>
			<view class="btn btn-primary flex-ct" :class="{ disabled: disabledNext }" @click="submit">
				下一步
			</view>
			<view class="text-28 flex-ct">
				登录即表示同意
				<navigator class="text-link" hover-class="none" url="/pages/user/Privacy">
					《一合通服务协议和隐私政策》
				</navigator>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="other">
				<view class="flex-ct">
					<view class="line"></view>
					<text class="text-28">一键登录</text>
					<view class="line"></view>
				</view>
				<button class="flex-ct box-wechat" type="default" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">
					<image class="img-wechat" src="@/static/ButtonWeChat.png"></image>
					<!-- <button
	          type="default"
	          open-type="getPhoneNumber"
	          @getphonenumber="getPhoneNumber"
	        ></button> -->
				</button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				form: {
					password: '',
					phone: '',
					verificationCode: '',
				},
				disabled: false,
				btnText: "获取验证码"
			}

		},
		computed: {
			disabledNext() {
				return !this.form.phone || this.form.verificationCode.length !== 6;
			}
		},
		methods: {
			login() {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes.authResult);
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								console.log('用户昵称为：' + infoRes.userInfo.nickName);
							}
						});
					}
				});
				console.log("进来了登录方法")
				uni.reLaunch({
					url: '/pages/tabbar/index',
				});
			},


			submit() {
				console.log("进来了手机号登录方法")
				uni.reLaunch({
					url: '/pages/tabbar/index',
				});
			},
			getPhoneNumber() {
				console.log("得到手机号")
			}
		}
	}
</script>

<style>
	.page {
		padding: 0 76rpx;
	}

	button {
		/* 清除默认边框 */
		border: 0;
		outline: none;
		/*清除默认背景 */
		background-color: transparent;
	}


	.btn-box {
		margin: 150rpx auto 0;

		width: 598rpx;
		height: 88rpx;

	}

	.btn-cancel {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 598rpx;
		height: 88rpx;
		border-radius: 8rpx;
		font-size: 32rpx;
		background-color: #e6e6e6;
	}

	.icon-phone {
		margin-right: 20rpx;
		width: 40rpx;
		height: 40rpx;
		line-height: 88rpx;
	}

	.btn-primary {
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		width: 598rpx;
		height: 88rpx;
		border-radius: 8rpx;
		font-size: 32rpx;
		background-color: limegreen;
	}

	.btn-box .btn-primary .icon-wechat {
		margin-right: 20rpx;
		width: 40rpx;
		height: 40rpx;
		line-height: 88rpx;

	}

	.flex-ct {
		font-size: 26rpx;
	}

	.text-link {
		color: #3277ff;
	}

	.btn-cancel {
		border-color: #ccc;
		margin: 32rpx 0;
	}

	.top-box {
		padding: 0 24rpx;
		position: relative;

	}

	.logo {
		margin: 50rpx auto 0;
		width: 150rpx;
		height: 150rpx;
		display: block;
		position: relative;
		z-index: 1;
	}

	.title {
		font-size: 48rpx;
		position: relative;
		z-index: 1;

	}

	.text-28 {
		display: flex;
		align-content: flex-start;
	}

	.other {
		width: 300rpx;
		height: 200rpx;
		background-color: #666666;
		margin-top: 60rpx;
		text-align: center;
	}

	.other.text-28 {
		margin: 0 32rpx;
		color: #666666;
		line-height: 56rpx;
	}

	.other .line {
		width: 100rpx;
		height: 1px;
		background: #e6e6e6;
	}

	.other .img-wechat {
		width: 80rpx;
		height: 80rpx;
	}

	.text-28 {
		color: #333333;
		line-height: 56rpx;
		font-weight: 500;
	}

	.form-item {
		display: flex;
		align-items: center;
		/* align-content: center;
	  align-items: flex-start; */
		height: 100rpx;

		border-bottom: 1px solid #e6e6e6;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;


	}

	.icon-auth,
	.icon-phone {
		width: 40rpx;
		height: 40rpx;
	}

	.form-item input {
		padding: 0 24rpx;
	}

	.form-item .btn-vice {
		height: 56rpx;
		width: 200rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
	}

	.form-item .disabled {
		color: #ccc;
	}

	/* .form-item .btn {
		width: 598rpx;
		height: 88rpx;
		margin: 60rpx 0 32rpx;
		background-color: $uni-color-primary;
		border-radius: $uni-border-radius-base;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
	} */

	.icon-phoneGet {
		width: 40rpx;
		height: 40rpx;
		line-height: 88rpx;
	}

	.icon-auth {
		width: 40rpx;
		height: 40rpx;
		line-height: 88rpx;
	}
</style>